import { useState, useEffect } from 'react';

const App = (props) => {
  const [list, setList] = useState([])

  // 1.useEffect() 是个副作用函数, 可以执行数据的请求
  // 问题：数据改变之后，数据请求一直不停
  // useEffect(() => { // 相当于componentDidMount componentDidUpdate 
  //   fetch('http://121.89.205.189:3001/api/pro/list').then(res => res.json()).then(res => {
  //     console.log(res.data) // 一直在打印 相当于一直触发 componentDidUpdate
  //     setList(res.data)
  //   })
  // })

  // 2.useEffect() 第二个参数是一个依赖项，如果设置为 空数组，表明 useEffect只会执行1次
  // useEffect(() => { // 相当于componentDidMount 
  //   fetch('http://121.89.205.189:3001/api/pro/list').then(res => res.json()).then(res => {
  //     console.log(res.data) // 只打印1次
  //     setList(res.data)
  //   })
  // }, [])

  // 3. useEffect() 可以根据第二个参数的值的变化来判断是否需要再次执行
  // 相当于在vue中监听数据的变化的操作
  // const [count, setCount] = useState(10)
  // useEffect(() => { // 相当于componentDidMount componentDidUpdate 
  //   fetch('http://121.89.205.189:3001/api/pro/list').then(res => res.json()).then(res => {
  //     console.log(res.data) // 只要count的值发生改变，useEffect就会重新执行
  //     setList(res.data)
  //   })
  // }, [count])

  // 4.useEffect 内返回一个函数，相当于 componentWillUnmount
  // 假设count值为17 ，销毁组件
  const [count, setCount] = useState(10)
  useEffect(() => { // 相当于componentDidMount componentDidUpdate componentWillUnmount(返回函数) 
    fetch('http://121.89.205.189:3001/api/pro/list').then(res => res.json()).then(res => {
      console.log(res.data) // 只要count的值发生改变，useEffect就会重新执行
      setList(res.data)
    })
    return () => { // componentWillUnmount(返回函数)
      console.log('销毁了组件') // 每次count值改变，都会打印 ---- 状态改变会引起函数式组件的整体的重新的渲染
    }
  }, [count])
  
  useEffect(() => {
    // 判断count的值
    if (count === 17) {
      props.root.unmount()
    }
  }, [count, props.root]) // 添加了useEffect中的依赖项

  return (
    <div>
      <button onClick={ () => setCount(count + 1)}>加</button>{ count }
      <ul>
        {
          list && list.map(item => (
            <li key = { item.proid }>{ item.proname }</li>
          ))
        }
      </ul>
    </div>
  );
};

export default App;